<template>
	<view>
		<u-navbar title-color="#fff" title-bold title-size="36" title="充值中心" :border-bottom="false"
			back-icon-color="#fff" :background="{backgroundColor: '#1EA2B4'}"></u-navbar>
		<view class="topdiv">
			<view class="topm">
				<image class="aipay-img" src="../../static/img/mine/aipay-img.png" mode=""></image>
				<view class="czjv"  @click="toJilu">
					充值记录 >
				</view>
				<view class="font_weight">
					<view class="u-font-36">
						AI助手充值
					</view>
					<view class="u-font-20 font_weight_normal u-m-t-14">
						当前到期时间
					</view>
					<view class="u-font-24 u-m-t-14" >
						{{userInfo.ai_time?userInfo.ai_time:'--'}}
					</view>
				</view>
			</view>
		</view>
		<view class="font_16_333 font_weight u-m-t-60 u-m-l-32">
			AI助手套餐
		</view>
		<view class="m-div flex flex_sb">
			<view class="m-item " :class="cIndex==index2?'m-item-sel m-item-sel2':''"
			 v-for="(item2,index2) in ailist" :key="index2" 
			 @click="cIndex=index2,price=item2.price,id=item2.id,aicontent=item2.content">
				<view class="m-title">
					{{item2.name}}
				</view>
				<view class="u-m-t-20">
					<span class="m-fh">¥</span>
					<span class="m-num">{{item2.price}}</span>
				</view>
				<view class="m-hx u-m-t-12">
					原价 ¥{{item2.org_price}}
				</view>
				<view class="gouxuan" v-if="cIndex==index2">
					<u-icon name="checkbox-mark" color="#fff" size="28"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="song flex">
			<view class="s-zi">
				送
			</view>
			<view class="xs">
				限时特惠
			</view>
			<view class="mf">
				免费试用1个月AI助手
			</view>
		</view>
		
		<view class="flex  font_weight u-m-t-40 u-m-l-32">
			<view class="sx"></view>
			<view class="u-m-l-20">
				AI助手优势
			</view>
		</view>
		<view class="youshi">
			{{aicontent}}
		</view>
		<view class="zhanwei"></view>
		<view class="hy-btn-div">
			<view class="hy-btn flex flex_cen" @click="toup">
				<span class="num" v-if="price">￥{{price}} </span>
				立即开通
			</view>
			<view class="u-m-t-24 flex flex_cen">
				<view class="chbox  flex_cen flex" v-if="chboxSel" @click="chboxSel=false">
					<u-icon name="checkbox-mark" color="#fff" size="28"></u-icon>
				</view>
				<view class="chbox-no" v-if="!chboxSel" @click="chboxSel=true"></view>
				<view class="u-m-l-10 font_14_999">
					开通前请确认
					<span class="yhxy"  @click="tode">《会员服务协议》</span>
				</view>
			</view>
		</view>
		<couponList :couponShow="couponShow" @shiyong="shiyong" type="1"></couponList>
	</view>
</template>

<script>
	import couponList from '../../components/couponList/couponList.vue';
	export default {
		components: {
			couponList
		},
		data() {
			return {
				couponShow:false,
				chboxSel: false,
				cIndex: -1,
				userInfo:[],
				ailist:[],
				price:'',
				yhq_id:'',
				yhq_price:'',
				aicontent:''
			}
		},
		onLoad() {
			this.couponShow = true
			this.getList()
			this.getInfo()
		},
		methods: {
			shiyong(e){
				if(e){
					this.yhq_id = e.id
					// this.yhq_price =  e.jian_price
					// if(this.price*1 < e.man_price*1){
					// 	// this.price = ((this.price*1) - (e.jian_price*1)).toFixed(2)
					// }else{
					// 	this.price = ((this.price*1) - (e.jian_price*1)).toFixed(2)
					// }
				}else{
					this.yhq_id = ''
				}
				// this.yhq_id = e
				this.couponShow = false
				console.log(e)
			},
			toJilu(){
				uni.navigateTo({
					url:"/pages/mine/memberBuyList"
				})
			},
			//个人信息
			getInfo() {
				this.$api({
					url: '/getUserInfo',
					method: 'get',
					data: {
						token:uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
					} 
				})
				
			},
			tode(){
				uni.navigateTo({
					url:"/pages/index/privacyAgreement/privacyAgreement?title=会员服务协议&id=39"
				})
			},
			getList() {
				
				
				this.$api({
					url: '/lawyer/ai_list',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type:2
					},
				}).then(res => {
					if (res.code == 1) {
						this.ailist = res.data
						if(res.data.length>0){
							this.aicontent = res.data[0].content
						}
						
					}
				})
			},
			toup() {
				if(!this.id){
					uni.showToast({
						icon: 'none',
						title: '请选择充值套餐',
						duration: 1500
					});
					return
				}
				if(!this.chboxSel){
					uni.showToast({
						icon: 'none',
						title: '请勾选《会员服务协议》',
						duration: 1500
					});
					return
				}
				this.$api({
					url: '/user/buy_ai',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						ai_id:this.id,
						price:this.price,
						yhq_id:this.yhq_id
					},
				}).then(res => {
					if (res.code == 1) {
						
						// uni.showToast({
						// 	icon: 'none',
						// 	title: '购买成功',
						// 	duration: 1500
						// });
						let that = this
						uni.requestPayment({
							provider: "wxpay",
							appid: res.data.pay_info.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							timeStamp: res.data.pay_info.timeStamp, // 时间戳（单位：秒）
							paySign: res.data.pay_info.paySign, //签名
							nonceStr: res.data.pay_info.nonceStr, // 随机字符串
							package: res.data.pay_info.prepay_id, // 固定值
							signType: res.data.pay_info.signType, // 签名算法，这里用的 MD5/RSA 签名
							success(res2) {
								if (res2.errMsg == "requestPayment:ok") {
									that.getInfo()
									uni.showToast({
										title: "购买成功",
										icon: "none"
									});
								}
							},
							fail(e) {
								console.log('支付失败支付失败支付失败', e)
								uni.showToast({
									title: "支付失败",
									icon: "none"
								});
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.sx{
		width: 8rpx;
		height: 24rpx;
		background: #257487;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
	.youshi{
		width: 686rpx;
		padding: 16rpx 32rpx;
		background: #FBFBFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #F6F6FB;
		font-size: 24rpx;
		color: #333333;
		line-height: 48rpx;
		margin: 20rpx auto;
	}
	.song{
		width: 686rpx;
		padding: 20rpx 26rpx;
		background: #F9FDFD;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #DFEFF2;
		margin: 0 auto;
		.s-zi{
			width: 40rpx;
			height: 40rpx;
			background: linear-gradient( 138deg, #F9471C 0%, #FDAD37 100%);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-weight: bold;
			text-align: center;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #FFFFFF;
		}
		.xs{
			margin-left: 20rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
		}
		.mf{
			margin-left: 20rpx;
			font-weight: bold;
			font-size: 24rpx;
			color: #F65D26;
		}
	}
	.zhanwei {
		width: 750rpx;
		height: 142rpx;
	}

	.hy-btn-div {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 188rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0, 0, 0, 0.14);
		padding: 24rpx 32rpx;

		.hy-btn {
			width: 686rpx;
			height: 92rpx;
			background: linear-gradient(177deg, #FFF7EA 0%, #ECA561 100%);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #773E00;
			text-align: center;
			line-height: 92rpx;
		}
	}

	.chbox {
		width: 32rpx;
		height: 32rpx;
		background: #F81B1B;
		border-radius: 50%;
		text-align: center;
		// line-height: 24rpx;
	}

	.chbox-no {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 1px #999 solid;
	}

	.yhxy {
		color: #F92323;

	}

	.num {
		font-weight: bold;
		font-size: 40rpx;
		color: #713005;
		margin-right: 16rpx;
	}

	.m-div {
		padding: 38rpx 32rpx;

		.m-item {
			width: 218rpx;
			height: 240rpx;
			background: #FFFFFF;
			border-radius: 32rpx 12rpx 32rpx 12rpx;
			border: 2rpx solid #EBEAEA;
			text-align: center;
			padding-top: 32rpx;
			position: relative;

			&-sel {
				border: 2rpx solid #6DA5B1;
				background: #F9FDFD;
				box-shadow: 0rpx 0rpx 14rpx 2rpx rgba(0,0,0,0.04);
				color: #713005;

				.m-title {
					color: #713005 !important;
				}

				.m-hx {
					color: #713005 !important;
				}
			}

			.m-title {
				font-size: 28rpx;
				color: #2F364B;
			}

			.m-fh {
				font-weight: bold;
				font-size: 24rpx;
				color: #FC3A30;
			}

			.m-num {
				font-weight: bold;
				font-size: 56rpx;
				color: #FC3A30;
			}

			.m-hx {
				font-size: 20rpx;
				color: #2F364B;
				text-decoration-line: line-through;
			}

			.gouxuan {
				width: 39rpx;
				height: 39rpx;
				background-color: #6DA5B1;
				border-radius: 12rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				z-index: 2;
			}
		}
	}

	.topdiv {
		width: 750rpx;
		height: 188rpx;
		background: linear-gradient(180deg, #1EA2B4 0%, #014E60 100%);


		.topm {
			width: 600rpx;
			height: 188rpx;
			background: linear-gradient(180deg, #DBF0F0 0%, #EAF6F7 100%, rgba(216, 196, 166, 0) 100%);
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			margin: 0 auto;
			padding: 24rpx 36rpx;
			position: relative;
			color: #257487;

			.aipay-img {
				position: absolute;
				top: 0;
				right: 100rpx;
				width: 260rpx;
				height: 188rpx;
			}

			.czjv {
				position: absolute;
				bottom: 12rpx;
				right: 12rpx;
				padding: 6rpx 14rpx;
				background: linear-gradient(138deg, #7ED4DB 0%, #008BAC 100%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-size: 18rpx;
				color: #FFFFFF;
			}
		}
	}
</style>